<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Imagr</title>
    
    <style type="text/css">
    @import "css/estilo.css";
    @import "css/smoothness/jquery-ui-1.7.1.custom.css";
    @import "css/colorpicker.css";
    </style>
    
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
    <script type="text/javascript" src="js/funcoes.js"></script>
    <script type="text/javascript" src="js/jquery.shortkeys.js"></script>
    <script type="text/javascript" src="js/jquery.imgareaselect.js"></script>
    <script type="text/javascript" src="js/iutil.js"></script>
    <script type="text/javascript" src="js/idrag.js"></script>
    <script type="text/javascript" src="js/json2.js"></script>
    <script type="text/javascript" src="js/colorpicker.js"></script>
    <script type="text/javascript" src="js/eye.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
    
    <script type="text/javascript">
	$(function() {
            var controles = $("#div_controles");
            var controles_submenu = $("#div_controles_submenu");
            
            $("#div_controles_submenu div").css("visibility", "hidden");
            
            
            controles.draggable();
            controles_submenu.draggable();  
            
	});
        
    </script>
 
</head>
<body>
    <div id="div_principal">
        <div id="div_cabecalho">
	    <div style="float:right;">
	        <form onsubmit="javascript: finalizaCarregarFoto(); return false;">
		    <input type="text" id="urlFoto" value="url da imagem" onfocus="javascript: if(this.value=='url da imagem'){this.value='';} this.select();" />
		    <input type="image" title="Abrir Imagem" alt="Abrir Imagem" src="images/ico/32x32/folder_yellow.png" />
		    <img src="images/ico/32x32/3floppy_unmount.png" title="Salvar Imagem" alt="" class="botao" onclick="javascript:iniciaSalvar();" />
		    <!--<img src="images/ico/32x32/folder_yellow.png" alt="" class="botao" onclick="javascript:iniciaCarregarFoto();" />-->
		</form> 
		
	    </div>
	    <img src="images/logo.png" alt="Imagr" width="150" />
	</div>
        
        
	<div id="areaTXT">
		<div id="txtBox" style="position: absolute;">Seu texto aqui</div>
	</div>
	
	<div id="div_menu">
	    <ul>
		<li><a href="javascript:cancelaTodos();iniciaCarregarFoto();">Abrir</a></li>
		<li><a href="javascript:cancelaTodos();iniciaSalvar();">Salvar</a></li>
		<li><a href="javascript:cancelaTodos();iniciaRecorte();">Re<u>c</u>ortar</a></li>
		<li><a href="javascript:cancelaTodos();iniciaRedimensionar();"><u>R</u>edimensionar</a></li>
		<li><a href="javascript:cancelaTodos();iniciaGirar();"><u>G</u>irar</a></li>
		<li><a href="javascript:cancelaTodos();iniciaInverter();"><u>I</u>nverter</a></li>
		<li><a href="javascript:cancelaTodos();iniciaContraste();">C<u>o</u>vntraste</a></li>
		<li><a href="javascript:cancelaTodos();iniciaWatermark();"><u>M</u>arca D'agua</a></li>
		<li><a href="javascript:cancelaTodos();iniciaTexto();"><u>T</u>exto</a></li>
		<li><a href="javascript:cancelaTodos();iniciaNegativo();">I<u>n</u>verter cores</a></li>
		<li><a href="javascript:cancelaTodos();iniciaGrayscale();">Escala de cinza</a></li>
		<li><a href="javascript:cancelaTodos();iniciaColorir();">Colorir</a></li>
		<li><a href="javascript:cancelaTodos();cancelarAcao(1);">Desfa<u>z</u>er</a></li>
		<li><a href="javascript:cancelaTodos();exibeSobre();">Sobre</a></li>
	    </ul>
	    
	</div>
        
        <div id="div_imagem">
            <img src="" id="imagem" alt="Imagem" />
        </div>
       
        <div id="div_controles">
	    <img src="img/ico/cut.png" alt="Recortar" onclick="javascript:cancelaTodos();iniciaRecorte();"  title="Recortar" class="botao"/>
	    <hr />
	    <img src="img/ico/shape_handles.png" alt="Redimensionar" onclick="javascript:cancelaTodos();iniciaRedimensionar();"  title="Redimensionar" class="botao"/>
	    <hr />
	    <img src="img/ico/arrow_rotate_anticlockwise.png" alt="Girar" onclick="javascript:cancelaTodos();iniciaGirar();"  title="Girar" class="botao"/>
	    <hr />
	    <img src="img/ico/arrow_refresh.png" alt="Inverter" onclick="javascript:cancelaTodos();iniciaInverter();"  title="Inverter" class="botao"/><hr />
	    <img src="img/ico/contrast.png" alt="Contraste" onclick="javascript:cancelaTodos();iniciaContraste();"  title="Contraste" class="botao"/>
	    <hr />
	    <img src="img/ico/layers.png" alt="Marca d'agua" onclick="javascript:cancelaTodos();iniciaWatermark();"  title="Marca D'agua" class="botao"/>
	    <hr />
	    <img src="img/ico/font.png" alt="Texto" onclick="javascript:cancelaTodos();iniciaTexto();" title="Texto" class="botao"/> 
	    <hr />
	    <img src="img/ico/pictures.png" alt="Inverter cores" onclick="javascript:cancelaTodos();iniciaNegativo();" title="Inverter cores" class="botao"/>
	    <hr />
	    <img src="img/ico/grayscale.png" alt="Escala de cinza" onclick="javascript:cancelaTodos();iniciaGrayscale();" title="Escala de cinza" class="botao"/>
	    <hr />
	    <img src="img/ico/palette.png" alt="Colorir" onclick="javascript:cancelaTodos();iniciaColorir();" title="Colorir" class="botao"/>
	    <hr />
	    <img src="img/ico/arrow_undo.png" alt="Desfazer" onclick="javascript:cancelaTodos();cancelarAcao(1);" title="Desfazer" class="botao"/>

        </div>
        
        <div id="div_controles_submenu">
            <div id="Recorte">
                <img src="images/ico/16x16/ok.png" class="botao" alt="" title="Aplicar" style="float:right;"  onclick="javascript:finalizaRecorte();" />
                <img src="images/ico/16x16/cancel.png" class="botao" alt="" title="Cancelar" onclick="javascript:cancelaRecorte();" />
                <hr />
		<p>Selecione a área da imagem que deseja recortar</p>
            </div>
	    
	    <div id="Redimensionar">
                <img src="images/ico/16x16/ok.png" class="botao" alt="" title="Aplicar" style="float:right;"  onclick="javascript:finalizaRedimensionar();" />
                <img src="images/ico/16x16/cancel.png" class="botao" alt="" title="Cancelar" onclick="javascript:cancelaRedimensionar();" />
                <hr />
		<p>Clique e arraste o canto inferior direito da imagem para alterar o tamanho</p>
            </div>
            
            <div id="Girar">
                <img src="images/ico/16x16/ok.png" class="botao" alt="" title="Aplicar" style="float:right;"  onclick="javascript:finalizaGirar();" />
                <img src="images/ico/16x16/cancel.png" class="botao" alt="" title="Cancelar"  onclick="javascript:escondeSubMenu();" />
                <hr />
                <label for="girarGraus"><strong>Graus:</strong></label> <input type="text" id="girarGraus" value="90" size="3" />
            </div>
	    
	    <div id="Inverter">
                <!--<img src="images/ico/16x16/ok.png" class="botao" alt="" title="Aplicar" style="float:right;"  onclick="" />-->
                <img src="images/ico/16x16/cancel.png" class="botao" alt="" title="Cancelar"  onclick="javascript:escondeSubMenu();" />
                <hr />
		<a href="#" onclick="javascript:finalizaInverter('horizontal');">Horizontalmente</a>
		<br />
		<a href="#" onclick="javascript:finalizaInverter('vertical');">Verticalmente</a>
            </div>
	    
	    <div id="Contraste">
                <img src="images/ico/16x16/ok.png" class="botao" alt="" title="Aplicar" style="float:right;"  onclick="javascript:finalizaContraste();" />
                <img src="images/ico/16x16/cancel.png" class="botao" alt="" title="Cancelar"  onclick="javascript:escondeSubMenu();" />
                <hr />
		<label for="qtdeContraste"><strong>Contraste (0-9999):</strong></label> <input type="text" id="qtdeContraste" value="100" size="3" />
            </div>
	    
	    
	   
	    <div id="MarcaDagua">
                <img src="images/ico/16x16/ok.png" class="botao" alt="" title="Aplicar" style="float:right;"  onclick="javascript:finalizaWatermark();" />
                <img src="images/ico/16x16/cancel.png" class="botao" alt="" title="Cancelar"  onclick="javascript:escondeSubMenu();" />
                <hr />
		<p><label for="urlWatermark"><strong>URL da imagem:</strong></label> <input type="text" id="urlWatermark" value="" size="30" /></p>
		<p><label for="wmPosX"><strong>Posição X: </strong></label>
			<select id="wmPosX">
				<option value="esquerda">Esquerda</option>
				<option value="centro">Centro</option>
				<option value="direita">Direita</option>
			</select>
		</p>
		<p><label for="wmPosY"><strong>Posição Y: </strong></label>
			<select id="wmPosY">
				<option value="topo">Topo</option>
				<option value="centro">Centro</option>
				<option value="rodape">Rodapé</option>
			</select>
		</p>
		<p>
			<label for="wmW"><strong>Largura (px): </strong></label>
			<input type="text" id="wmW" value="80" size="3" />
		</p>
		<p>
			<label for="wmH"><strong>Altura (px): </strong></label>
			<input type="text" id="wmH" value="80" size="3" />
		</p>

		<p><label for="wmTransp"><strong>Opacidade (0-100):</strong></label> <input type="text" id="wmTransp" value="100" size="4" /></p>
            </div>
	    
            
            <div id="Texto">
                <img src="images/ico/16x16/ok.png" class="botao" alt="" title="Aplicar" style="float:right;" onclick="javascript:finalizaTexto();" />
                <img src="images/ico/16x16/cancel.png" class="botao" alt="" title="Cancelar" onclick="javascript:cancelaTexto();" />
                <hr />
                <p><label for="texto"><strong>Texto:</strong></label> <input type="text" id="texto" value="Seu texto aqui" size="30" onkeyup="atualizaTexto(this.value);" onkeydown="atualizaTexto(this.value);" /></p>
		<p>
			<label for="texto"><strong>Cor:</strong></label>
			<input type="text" id="corR" size="2" onkeyup="javascript:cores();" />
			<input type="text" id="corG" size="2" onkeyup="javascript:cores();" />
			<input type="text" id="corB" size="2" onkeyup="javascript:cores();" />
		</p>
		<p>
			<label for="txtSize"><strong>Tamanho:</strong></label>
			<select id="txtSize" onchange="javascript:txtTamanho(this.value);">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="4">4</option>
				<option value="8">8</option>
				<option value="12">12</option>
				<option value="16" selected="selected">16</option>
				<option value="20">20</option>
				<option value="24">24</option>
			</select>
		</p>
            </div>
        </div>
        
	
	<div id="avisos"><img src="img/loading.gif" alt="carregando" /><br/>aplicando configurações</div>
	
	<div id="toolboxOverlay" onclick="javascript:bloqueioToolbar();"></div>
	
	<div id="overlay" style="visibility:hidden;"></div>
	
	
	<div id="barraColorir" class="barraFerramentas toolbarManyOpt">
		<p style="display: none">
			<label for="corR"><strong>Cor:</strong></label>
			<input type="text" id="corR" class="corR" name="corR" size="2" />
			<input type="text" id="corG" class="corG" name="corG" size="2" />
			<input type="text" id="corB" class="corB" name="corB" size="2" />
		</p>
		<div class="cp" style="padding-bottom:10px;"></div>
		<p><a href="#" onclick="javascript:finalizaColorir();">Salvar</a> | <a href="#" onclick="javascript:cancelaColorir();">Cancelar</a></p>
	</div>

	
	<div id="barraEnviarEmail" class="barraFerramentas">
		<label for="enderecoEmail"><strong>E-mail:</strong></label> <input type="text" id="enderecoEmail" value="" size="30" />
		<a href="#" onclick="javascript:finalizaEnviarEmail();">Enviar</a> |
		<a href="#" onclick="javascript:cancelaEnviarEmail();">Cancelar</a>
	</div>
	
	<div id="barraSalvar" class="barraFerramentas"></div>

	<div id="barraAvisos" class="barraFerramentas"></div>
	<div id="barraErros" class="barraFerramentas"></div>
	
	<div id="barraReiniciar" class="barraFerramentas">
		<p>
			Tem certeza?
			<a href="#" onclick="javascript:finalizaReiniciar();">Sim</a> | 
			<a href="#" onclick="javascript:cancelaReiniciar();">Não</a>
		</p>
	</div>
	
	<div id="barraCarregarFoto" class="barraFerramentas">
		<p>
			<label for="urlFoto"><strong>Via URL:</strong></label> <input type="text" id="urlFoto2" value="Desativado" size="35" />
			<a href="#" onclick="javascript:finalizaCarregarFoto();">Carregar</a> |
			<a href="#" onclick="javascript:cancelaCarregarFoto();">Cancelar</a>
		</p> <br/>
		
		<p>
			<strong>Imagem da lista:</strong> <select id="imagens">
				<option value="http://www.brunobarreto.net/imagr/img/exemplos/agua.jpg">Água</option>
				<option value="http://www.brunobarreto.net/imagr/img/exemplos/saopaulo.jpg">Av. Paulista</option>
				<option value="http://www.brunobarreto.net/imagr/img/exemplos/bebe_xicara.jpg">Bebê na xícara</option>
				<option value="http://www.brunobarreto.net/imagr/img/exemplos/cachorro.jpg">Cachorro</option>
				<option value="http://www.brunobarreto.net/imagr/img/exemplos/disney.jpg">Disney</option>
				<option value="http://www.brunobarreto.net/imagr/img/exemplos/grama.jpg">Grama</option>
				<option value="http://www.brunobarreto.net/imagr/img/exemplos/103324.jpg">São Paulo</option>
				<option value="http://www.brunobarreto.net/imagr/img/exemplos/ave.jpg">Vôo da Ave</option>
			</select>
		
			<a href="#" onclick="javascript:document.getElementById('urlFoto').value = document.getElementById('imagens').value;finalizaCarregarFoto();">carregar da lista</a>
		</p>

	</div>
	
	<p id="powertoy" style="display:none;">
	    <strong>Histórico de ações:</strong>
	    <textarea id="historicoAcoes"></textarea>
	    <button type="button" onclick="javascript:executaAcoes();">Executar ações</button>
	</p>
        
    </div>
</body>
</html>